<template>
  <el-card>
    <template #header>
      <div class="flex">
        <div class="flex1">生态结果审核</div>
      </div>
    </template>

    <h3>生态结果审核详情</h3>

    <el-steps :active="status != 0 ? 3 : 2" align-center>
      <el-step title="用户提交生态结果" />
      <el-step title="机构审核生态结果" />
      <el-step title="审核通过，自动更新绿色档案/审核不通过，打回重新修改" />
    </el-steps>

    <!--    <h3>活动基础信息</h3>-->

    <el-result
      v-if="status == 2"
      icon="success"
      title="审核通过！"
      sub-title="已自动为该学生累计生态时长、生态积分！"
    >
      <template #extra>
        <el-button type="primary" @click="onSee">查看活动</el-button>
      </template>
    </el-result>
    <el-result
      v-if="status == 1"
      icon="error"
      title="审核不通过！"
      sub-title="已打回，请提醒学生重新修改并提交"
    >
      <template #extra>
        <el-button type="primary" @click="onSee">查看生态结果</el-button>
      </template>
    </el-result>
    <el-form
      v-if="status == 0"
      ref="formRef"
      v-loading="loading"
      :model="formData"
      label-width="160px"
      :rules="formRules"
      class="page"
    >
      <el-form-item label="活动名称" prop="organizationId">
        {{ data?.activityName }}
      </el-form-item>
      <el-form-item label="活动封面" prop="organizationId">
        <el-image
          :src="data?.activityCover"
          :preview-src-list="[data?.activityCover]"
        ></el-image>
      </el-form-item>
      <!--      <el-form-item label="活动详情" prop="realName">
        {{ data?.activityDetails }}
      </el-form-item>
      <el-form-item label="活动有效期" prop="realName">
        {{ data?.activityBeginTime }} 至 {{ data?.activityEndTime }}
      </el-form-item>
      <el-form-item label="活动时间及人数限制" prop="realName">
        <el-table :data="data?.detailList || []" border>
          <el-table-column prop="date" label="活动时间">
            <template #default="scope">
              {{ scope.row.beginTime }} ~ {{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column prop="participantsLimit" label="可报名人数">
            <template #default="scope">
              {{ scope.row.participantsLimit }}人
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="活动地点" prop="realName">
        {{ data?.eventLocation }}
      </el-form-item>
      <el-form-item label="活动单价" prop="realName">
        {{ toPrice(data?.activityPrice) }}
      </el-form-item>-->
      <el-form-item label="活动分类" prop="realName">
        {{ getClassificationName(data?.classificationList) }}
      </el-form-item>
      <!--      <el-form-item label="发起单位" prop="realName">
        {{ data?.originatingComp }}
      </el-form-item>-->
      <el-form-item label="所属任务分类" prop="realName">
        {{ getClassificationName(data?.classificationList) }}
      </el-form-item>
      <el-form-item label="活动时长" prop="realName">
        {{ data?.activityDuration }}小时
      </el-form-item>
      <el-form-item label="积累生态时长" prop="realName">
        {{ data?.duration }}小时
      </el-form-item>
      <el-form-item label="积累生态积分" prop="realName">
        {{ data?.integral }}分
      </el-form-item>
      <!--      <el-form-item label="微信咨询二维码" prop="realName">
        {{ data?.consultationQrCode }}
      </el-form-item>
      <h3>使用须知</h3>
      <el-form-item label="使用方法" prop="realName">
        {{ data?.usageInfo }}
      </el-form-item>
      <el-form-item label="集合地址" prop="realName">
        {{ data?.collectionAddress }}
      </el-form-item>
      <el-form-item label="任务流程" prop="realName">
        {{ data?.taskProcess }}
      </el-form-item>
      <el-form-item label="注意事项" prop="realName">
        {{ data?.mattersNeeding }}
      </el-form-item>
      <el-form-item label="取消条款" prop="sex">
        活动开始{{ data?.cancelDays }}天前可免费取消
      </el-form-item>
      <h3>活动审核</h3>
      <el-form-item label="申请人" prop="realName">
        {{ data?.createByName }}
      </el-form-item>
      <el-form-item label="申请时间" prop="realName">
        {{ data?.createTime }}
      </el-form-item>-->
      <el-form-item label="出行时间" prop="realName">
        {{ data?.beginTime }} ~ {{ data?.endTime }}
      </el-form-item>
      <el-form-item label="学生姓名" prop="studentName">
        {{ data?.studentName }}
      </el-form-item>

      <el-form-item label="任务结果" prop="result">
        {{ data?.result }}
      </el-form-item>
      <el-form-item label="任务结果图片" prop="picUrls">
        <template #default="scope">
          <el-image
            style="display: inline-block; width: 100px; margin-right: 4px"
            v-for="item in data?.picUrls || []"
            :src="item.imageUrl"
            :key="item.imageUrl"
          />
        </template>
      </el-form-item>

      <el-form-item label="审核状态" prop="status">
        <tag
          :value="data?.auditingStatus"
          type="auditingStatus"
          style="min-width: 68px"
        ></tag>
      </el-form-item>
      <div v-if="data">
        <!-- 未审核 -->
        <div v-if="data.auditingStatus == 0">
          <el-form-item label="审核是否通过" prop="auditingStatus">
            <CRadio
              constKey="auditingStatus2"
              v-model="formData.auditingStatus"
            />
          </el-form-item>

          <el-form-item
            label="打回理由"
            prop="status"
            v-if="formData.auditingStatus == 1"
          >
            <el-input
              v-model="formData.auditingReason"
              :rows="2"
              type="textarea"
              placeholder="请输入打回理由"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm"> 提交 </el-button>
            <el-button @click="$router.back()">取消 </el-button>
          </el-form-item>
        </div>
        <!-- 已通过 -->
        <div v-if="data.auditingStatus == 2">
          <el-form-item label="审核时间" prop="status">
            {{ data?.updateTime }}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$router.back()"
              >我知道了
            </el-button>
          </el-form-item>
        </div>
        <!-- 美通过 -->
        <div v-if="data.auditingStatus == 1">
          <el-form-item label="审核时间" prop="status">
            {{ data?.updateTime }}
          </el-form-item>
          <el-form-item label="打回理由" prop="status">
            <el-input
              disabled
              :value="data?.auditingReason || ' '"
              :rows="2"
              type="textarea"
              placeholder="请输入打回理由"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$router.back()"
              >我知道了
            </el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import API from '@/api/api';
import { useMessage } from '@/hooks/useMessage';
import { toPrice, getClassificationName } from '@/utils/index';
import { createRequireRole } from '@/utils/rules';
import { useRequest } from 'vue-hooks-plus';
// 0 正常状态   1 提交审核是失败 2 提交审核成功
const status = ref(0);
const formRules = reactive({
  auditingStatus: [createRequireRole()],
});
const formData = reactive({});
const formRef = ref(); // 表单 Ref

const route = useRoute();
const message = useMessage(); // 消息弹窗

const submitReq = useRequest(
  async (sendData: any) => {
    return API.greeArchivesController.auditing({
      id: route.query.id,
      ...sendData,
    });
  },
  {
    manual: true,
  }
);
function onSee() {
  status.value = 0;
  refresh();
}
const submitForm = async () => {
  // 校验表单
  if (!formRef) return;

  const valid = await formRef.value.validate();
  if (!valid) {
    return;
  }

  await submitReq.runAsync(formData);
  status.value = formData.auditingStatus;
  message.success('提交成功!');
};

const { data, loading, refresh } = useRequest(
  async () => {
    return API.greeArchivesController.info({
      id: route.query.id,
    });
  },
  {
    ready: !!route.query.id,
  }
);
</script>
